<template>
  <div class="box">
    <div class="content">
      <div class="content-title">{{ className }}</div>
      <div class="student">
        <div class="student-avatar"> {{ examineStartTime }} ~ {{ examineStopTime }} </div>
        <ul class="student-info">
          <li v-for="(item, index) in ListData.scoreBySuperiors" :key="index">
            <span class="title">{{ item.superiorName }}:</span>
            <span class="text">{{ item.sumScore }}</span>
          </li>
          <li>
            <span class="title">合计：</span>
            <span :class="['text', 'red']">{{ ListData.allSumScore }}</span>
          </li>
        </ul>
      </div>
      <div class="time-option">
        <div style="width: 300px; height: 400px; border: 1px solid #d9d9d9; border-radius: 4px">
          <Calendar
            v-model:value="dateTime"
            :fullscreen="false"
            :disabled-date="disabledDate"
            @panelChange="onPanelChange"
            @change="onPanelChange"
          >
            <template #headerRender="{ value: current, onChange }">
              <div style="padding: 10px">
                <div style="display: flex; align-items: center; justify-content: space-between">
                  <div style="display: flex">
                    <a-button
                      type="text"
                      size="small"
                      class="new-icon-arrow"
                      @click="
                        () => {
                          onChange(current.year(current.year() - 1));
                        }
                      "
                      ><DoubleLeftOutlined
                    /></a-button>
                    <a-button
                      type="text"
                      size="small"
                      class="new-icon-arrow"
                      @click="
                        () => {
                          onChange(current.month(parseInt(current.month() - 1, 10)));
                        }
                      "
                      ><LeftOutlined
                    /></a-button>
                  </div>
                  <div
                    style="
                      white-space: nowrap;
                      font-size: 16px;
                      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                      color: #222222;
                    "
                    >{{ `${current.year()}年${current.month() + 1}月` }}</div
                  >
                  <div style="display: flex">
                    <a-button
                      type="text"
                      size="small"
                      class="new-icon-arrow"
                      @click="
                        () => {
                          onChange(current.month(parseInt(current.month() + 1, 10)));
                        }
                      "
                      ><RightOutlined
                    /></a-button>
                    <a-button
                      type="text"
                      size="small"
                      class="new-icon-arrow"
                      @click="
                        () => {
                          onChange(current.year(current.year() + 1));
                        }
                      "
                      ><DoubleRightOutlined
                    /></a-button>
                  </div>
                </div>
              </div>
            </template>
          </Calendar>
        </div>
        <div class="time-option-content">
          <Collapse v-model:activeKey="activeKey" :bordered="false" expand-icon-position="right">
            <Collapse.Panel
              v-for="(em1, index) in ListDataDayExamine.roomList"
              :key="index"
              :style="customStyle"
              accordion
            >
              <template v-slot:header>
                <div
                  style="
                    font-size: 18px;
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                  "
                >
                  <span>{{ em1.dormitoryName }} {{ em1.roomName }}</span>
                  <span style="color: #fe8f8f">{{ em1.roomScore }}</span>
                </div>
              </template>
              <div
                v-for="(em2, index) in em1.itemDetailsVOList"
                :key="index"
                class="time-option-info"
              >
                <div class="content-title">{{ em2.superiorName }}</div>
                <ul>
                  <li v-for="(em3, index) in em2.examineDetails" :key="index">
                    <div>
                      <p v-for="(i, ind) of itemNameFun(em3.itemNames)" :key="ind">
                        <Tooltip
                          :overlay-style="{ whiteSpace: 'normal' }"
                          :get-popup-container="
                            triggerNode => {
                              return triggerNode.parentNode || document.body;
                            }
                          "
                          placement="topLeft"
                          :title="i"
                          >{{ i }}</Tooltip
                        ></p
                      >
                    </div>
                    <div class="red">{{
                      em3.examineGrade === '无'
                        ? em3.sumScore
                        : em3.examineGrade + ' (' + em3.sumScore + ')'
                    }}</div>
                    <div>
                      <FieldTimeOutlined />
                      <span style="margin-left: 8px">{{ em3.examineTime }}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </Collapse.Panel>
          </Collapse>
          <div class="total-box">
            <div class="total">
              <div>当日合计</div>
              <div class="total-num">{{ ListDataDayExamine.allSumScore }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Calendar, Collapse, Tooltip } from 'ant-design-vue';
import {
  DoubleLeftOutlined,
  LeftOutlined,
  RightOutlined,
  DoubleRightOutlined,
  FieldTimeOutlined
} from '@ant-design/icons-vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import {
  getComplexExamineDetails,
  getComplexExamineDayDetails
} from '@/api/assessment/classCollective';
import moment from 'moment';
import dayjs from 'dayjs';
/** 生命周期**/

onMounted(() => {
  if (route.query.examineStartTime === '') {
    examineStartTime.value = startTime;
  } else {
    examineStartTime.value = moment(route.query.examineStartTime).format('YYYY-MM-DD');
  }
  if (route.query.examineStopTime === '') {
    examineStopTime.value = endTime;
  } else {
    examineStopTime.value = moment(route.query.examineStopTime).format('YYYY-MM-DD');
  }
  let obj = {
    classId: route.query.classId.toString(),
    examineStartTime: route.query.examineStartTime,
    examineStopTime: route.query.examineStopTime
    // dayTime: currentTime.value
  };
  let objs = {
    classId: route.query.classId.toString(),
    examineStartTime: moment(route.query.examineStartTime).format('YYYY-MM-DD') + ' 00:00:00',
    examineStopTime: moment(route.query.examineStartTime).format('YYYY-MM-DD') + ' 23:59:59',
    dayTime: moment(route.query.examineStartTime).format('YYYY-MM-DD')
  };
  getTabsList(obj);
  getStudentDayExamine(objs);
  let bodySty = document.getElementById('myApp');
  bodySty.setAttribute('class', 'bodyStyle');
});

/** 数据区域**/
function itemNameFun(it) {
  if (it) {
    return it.split(',');
  }
  return it;
}
const route = useRoute();
// 当前开始日期
const startTime = moment(new Date(new Date(new Date().toLocaleDateString()).getTime())).format(
  'YYYY-MM-DD HH:mm:ss'
);
// 当前结束日期
const endTime = moment(
  new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
).format('YYYY-MM-DD HH:mm:ss');
// 当天日期
const dayTime = moment(new Date(new Date(new Date().toLocaleDateString()).getTime())).format(
  'YYYY-MM-DD'
);
const gradeName = ref(route.query.gradeName); // 年级
const className = ref(route.query.className); // 班级
let currentTime = ref(dayTime); // 当天日期1
let examineStartTime = ref(startTime); // 当前开始日期
let examineStopTime = ref(endTime); // 当前结束日期
const ListData = ref([]); // 列表数据
const ListDataDayExamine = ref([]); // 当天列表数据
/** 方法区域**/

// 获取班级集体-综合查询-查看-顶部的扣分详情
function getTabsList(obj) {
  getComplexExamineDetails(obj).then(res => {
    if (res.data.code === 200) {
      ListData.value = res.data.data;
    }
  });
}
// 获取班级集体-综合查询-查看-每天的扣分详情
function getStudentDayExamine(obj) {
  getComplexExamineDayDetails(obj).then(res => {
    if (res.data.code === 200) {
      ListDataDayExamine.value = res.data.data;
    }
  });
}
// 时间限制
function disabledDate(current) {
  console.log(examineStartTime.value, startTime, examineStopTime.value, endTime);
  // if (
  //   examineStartTime.value === moment(startTime).format('YYYY-MM-DD') &&
  //   examineStopTime.value === moment(endTime).format('YYYY-MM-DD')
  // ) {
  return (
    current < moment(route.query.examineStartTime) || current > moment(route.query.examineStopTime)
  );
  // } else {
  //   return (
  //     current < moment(route.query.examineStartTime) ||
  //     current > moment(route.query.examineStopTime).add(1, 'days')
  //   );
  // }
}
// 点击日期调接口
const onPanelChange = value => {
  let dayTime = moment(value.$d).format('YYYY-MM-DD');
  let newS = moment(value.$d).format('YYYY-MM-DD') + ' 00:00:00';
  let newe = moment(value.$d).format('YYYY-MM-DD') + ' 23:59:59';
  let obj = {
    classId: route.query.classId.toString(),
    dayTime: dayTime,
    examineStartTime: newS,
    examineStopTime: newe
  };
  getStudentDayExamine(obj);
};
const dateTime = ref(dayjs(route.query.examineStartTime));
const activeKey = ref([]);
const customStyle =
  'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden';
</script>

<style lang="less" scoped>
.box {
  background: #f2f2f2;
  // padding: 50px 120px 24px;
  min-height: 100vh;
  .content {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px;
    &-title {
      font-size: 24px;
      font-family: Source Han Sans CN, Source Han Sans CN-Medium;
      font-weight: 500;
      color: #222222;
      margin-bottom: 16px;
    }
    .student {
      border: 1px solid #e4b778;
      border-radius: 4px;
      padding: 24px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      .student-avatar {
        font-size: 16px;
        color: #222222;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      }
      .student-info {
        display: flex;
        flex-wrap: wrap;
        padding: 0 24px;
        margin-bottom: 0;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        li {
          padding: 12px 0;
          font-size: 14px;
          margin-left: 30px;
          .title {
            color: #999999;
            display: inline-block;
            text-align: end;
          }
          .text {
            color: #222222;
            margin-left: 8px;
          }
          .red {
            color: #ff0000;
          }
        }
      }
    }
    .time-option {
      display: flex;
      &-content {
        flex: 1;
        // background: #f8f8f8;
        border-radius: 4px;
        // padding: 16px;
        margin-left: 24px;
        .time-option-info {
          .content-title {
            font-size: 16px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            color: #222222;
            margin-bottom: 16px;
          }
          ul {
            li {
              padding: 12px 16px;
              font-size: 14px;
              font-family: Source Han Sans CN, Source Han Sans CN-Regular;
              color: #666666;
              display: flex;
              align-items: center;
              // justify-content: space-between;
              background: #ffffff;
              border-radius: 4px;
              .red {
                color: #fe8f8f;
              }
              div {
                flex: 1;
                p {
                  width: 400px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
              div:nth-child(2) {
                text-align: center;
              }
              div:last-child {
                text-align: end;
                justify-content: flex-end;
                align-items: center;
                display: flex;
              }
            }
            li + li {
              margin-top: 8px;
            }
          }
        }
        .total-box {
          background: #f8f8f8;
          border-radius: 4px;
          padding: 16px;
          .total {
            padding: 12px 16px;
            font-size: 14px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            color: #666666;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            border-radius: 4px;
            background: #ffffff;
            .total-num {
              color: #fe8f8f;
              margin-left: 90px;
            }
          }
        }
      }
    }
  }
}
/deep/.micro-dormitory-collapse-borderless {
  background-color: #ffffff;
}
</style>
